<template>
  <div class="recharge">
    <div class="integeralContent">
      <div class="integeralContentBox">
        <div
          class="underline"
        >
          <span class="title1 color1 zIndex fontBold">我的账户</span>
        </div>
        <div class="rechargeNum flex justify_between align_center">
          <p class="content3 color3 font400">
            积分余额
          </p>
          <p class="title1 color1 fontBold">
            1360
          </p>
        </div>
        <p class="rechargeTisp font400 color6 content3">
          请选择要充值的积分
        </p>
        <div
          class="integeralContentBoxItem"
          v-for="(item,index) in list"
          :key="index"
          @click="checkItem(index)"
          :class="acitve == index ? 'bg' : '' "
        >
          <div class="flex justify_between align_center">
            <p :class="acitve == index ? 'color4 content3 fontBold' : 'color2 content3 fontBold' ">
              {{ item.integral }}
            </p>
            <p
              :class="acitve == index ? 'color4 content3 font400' : 'color6 content3 font400' "
            >
              售价 {{ item.moeny }}元
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div
        class="font400 content3 color4"
        @click="back"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-fanhui" />
        </svg>
        <p class="content2 font400 color3">
          返回
        </p>
      </div>
      <div
        @click="submit"
        class="agree font400 content3 color4 ta"
      >
        立即支付
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const store = useStore()
const acitve:any = ref(0)
const list:any = ref([
  {
    integral: '8000积分',
    moeny: '8000'
  },
  {
    integral: '5000积分',
    moeny: '5000'
  },
  {
    integral: '2000积分',
    moeny: '1000'
  },
  {
    integral: '1000积分',
    moeny: '1000'
  }
])

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const checkItem = (i:any) => {
  acitve.value = i
}

const submit = () => {
  router.push('/userCenter/order')
}

</script>

<style lang="less" scoped>
.recharge {
    .underline {
        width: 120px;
    }
    .integeralContent {
        position: relative;
        // top: -40px;
        width: 100%;
        height: 100%;
        background: #f7f7f7;
        border-radius: 20px 20px 0px 0px;
        .integeralContentBox {
            padding: 40px 30px;
            .rechargeNum{
                margin:30px 0 20px;
                border-bottom:1px solid #CACACA;
                padding-bottom:15px;
            }
            .rechargeTisp{
                margin-bottom: 20px;
            }
            .integeralContentBoxItem {
                background: #ffffff;
                border-radius: 10px;
                padding:20px 15px;
                margin-bottom: 15px;
            }
            .bg{
                background-color: #FF7A1F;
            }
        }
    }
}
.fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
    .footer_btn {
        padding: 0 30px;
        height: 100%;
        text-align: center;
        .agree {
            width: 189px;
            height: 44px;
            background: #ff7a1f;
            border-radius: 5px;
            text-align: center;
            line-height: 44px;
        }
        .ta{
            width: 242px;
        }
        .icon {
            width: 23px;
            height: 23px;
            margin-bottom: 2px;
        }
    }
}

@media (min-width: 750px) {
  .recharge {
    .underline {
        width: 120px;
    }
    .integeralContent {
        position: relative;
        // top: -40px;
        width: 100%;
        height: 100%;
        background: #f7f7f7;
        border-radius: 20px 20px 0px 0px;
        .integeralContentBox {
            padding: 40px 30px;
            .rechargeNum{
                margin:30px 0 20px;
                border-bottom:1px solid #CACACA;
                padding-bottom:15px;
            }
            .rechargeTisp{
                margin-bottom: 20px;
            }
            .integeralContentBoxItem {
                background: #ffffff;
                border-radius: 10px;
                padding:20px 15px;
                margin-bottom: 15px;
            }
            .bg{
                background-color: #FF7A1F;
            }
        }
    }
}
.fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
    .footer_btn {
        padding: 0 30px;
        height: 100%;
        text-align: center;
        .agree {
            width: 189px;
            height: 44px;
            background: #ff7a1f;
            border-radius: 5px;f
            text-align: center;
            line-height: 44px;
        }
        .ta{
            width: 242px;
        }
        .icon {
            width: 23px;
            height: 23px;
            margin-bottom: 2px;
        }
    }
}
}
</style>
